/**
 * Created by sunyan on 2017/6/21.
 */
import api from '../../../../api/member'
/**
 *
 * 点击小分类出现描述功能
 *
 * **/
function getElementDesc(that){
    var _this = that;

    var svg = document.getElementById('level14'); //清空画线的svg元素
    $('#level14').empty();
    $('#showList').html('');
    clearTimeout(window.config.showConTimer_1);
    clearTimeout(window.config.showConTimer_2);
    $("#showContainer,#verticalLine").stop(false, true);
    document.getElementById('showContainer').style.height= 0+'px';

    var name = _this.attr('data-text')

    var pageW = $('body').width(),  //获取页面的高度和宽度
        pageH = $('body').height();
    var positionCircle1 = _this.find('.circle'),  //通过隐藏的圆点获取牵引线的开始坐标
        top = parseInt(positionCircle1.offset().top),
        left = parseInt(positionCircle1.offset().left);

    var halfMarginX = (pageW-1024)/2,
        halfMarginY = (pageH-640)/2;

    var originX = pageW/2 - halfMarginX,  //获取图像圆心的坐标
        originY = pageH/2 - halfMarginY;

    // console.log('页面宽度',$('body').width(), $(document).width())
    // console.log('页面高度',$('body').height(), $(document).height())

    var startX = left - halfMarginX, //起点坐标，svg的坐标是从svg的左上角00开始的
        startY = top  - halfMarginY;


    var distanceX = startX - originX, // 牵引线起始位置到圆心到坐标差
        distanceY = startY - originY;

    var absoluteValueX = Math.abs(distanceX),
        absoluteValueY = Math.abs(distanceY);

    var offW_1 = parseInt(0.5*pageW - halfMarginX-absoluteValueX -30) //第一类牵引线总长度
    var offW_2 = parseInt(0.5*pageW - halfMarginX-absoluteValueX -155) //第二类牵引线总长度

    var verticalOriginXDistance = 150

    if(absoluteValueY > verticalOriginXDistance){
      var horizon1 = parseInt((offW_1 - 190)*0.4),  //190是减去描述的宽度和两个折线所占的宽度
          horizon2 = parseInt((offW_1 - 190)*0.45),
          horizon3 = parseInt((offW_1 - 190)*0.15);
    }else{
      var horizon1 = parseInt(offW_2*0.30),
          horizon2 = parseInt(offW_2*0.40),
          horizon3 = parseInt(offW_2*0.30);
    }

    if(distanceX > 0 && distanceY < 0 && absoluteValueY > verticalOriginXDistance){  //第一类折线：右上
      var d1 = "M "+startX+" "+startY+" l 20 -8 l "+horizon1+" 0",
          d2 = "M "+(startX+20+horizon1)+" "+(startY-8)+" l "+horizon2+" 0",
          d3 = "M "+(startX+20+horizon1+horizon2)+" "+(startY-8)+" l "+horizon3+" 0 l 20 -8 l 150 0";
      drawBranchLine(d1,d2,d3,0.3);
      var style = {'top':startY-10+'px','right':30,"visibility":'visible'}
      drawDesc_1(style,name)
    }

    if(distanceX > 0 && absoluteValueY < verticalOriginXDistance) {  //第二类折线：右中
      var d1 = "M "+startX+" "+startY+" l "+horizon1+" 0",
          d2 = "M "+(startX+horizon1)+" "+startY+" l "+ horizon2 + " 0 ",
          d3 = "M "+(startX+horizon1+horizon2)+" "+startY+"l "+horizon3+" 0";
      drawBranchLine(d1,d2,d3,0.2)
      drawDesc_2(startY,'right',name)
    }

    if(distanceX > 0 &&  distanceY > 0 && absoluteValueY > verticalOriginXDistance){ //第三类折线：右下
      var d1 = "M "+startX+" "+startY+" l 20 8 l "+horizon1+" 0",
          d2 = "M "+(startX+20+horizon1)+" "+(startY+8)+" l "+horizon2+" 0",
          d3 = "M "+(startX+20+horizon1+horizon2)+" "+(startY+8)+" l "+horizon3+" 0 l 20 8 l 150 0";
      drawBranchLine(d1,d2,d3,0.3)
      var style = {'bottom':(640-startY-10)+'px','right':30,"visibility":'visible'}
      drawDesc_1(style,name)
    }

    if(distanceX < 0 && distanceY > 0 && absoluteValueY > verticalOriginXDistance){ //第四类折线：左下
      var d1 = "M "+startX+" "+startY+" l -20 8 l -"+horizon1+" 0",
        d2 = "M "+(startX-20-horizon1)+" "+(startY+8)+" l -"+horizon2+" 0",
        d3 = "M "+(startX-20-horizon1-horizon2)+" "+(startY+8)+" l -"+horizon3+" 0 l -20 8 l -150 0";
      drawBranchLine(d1,d2,d3,0.3)
      var style = {'bottom':(640-startY-10)+'px','left':30}
      drawDesc_1(style,name)
    }

    if(distanceX < 0 && absoluteValueY < verticalOriginXDistance){  //第五类折线：左中
      var d1 = "M "+startX+" "+startY+" l -"+horizon1+" 0",
          d2 = "M "+(startX-horizon1)+" "+startY+" l -"+ horizon2 + " 0 ",
          d3 = "M "+(startX-horizon1-horizon2)+" "+startY+"l -"+horizon3+" 0";
      drawBranchLine(d1,d2,d3,0.2)
      drawDesc_2(startY,'left',name)
    }

    if(distanceX < 0 && distanceY < 0 && absoluteValueY > verticalOriginXDistance){  //第六类折线：左上
      var d1 = "M "+startX+" "+startY+" l -20 -8 l -"+horizon1+" 0",
          d2 = "M "+(startX-20-horizon1)+" "+(startY-8)+" l -"+horizon2+" 0",
          d3 = "M "+(startX-20-horizon1-horizon2)+" "+(startY-8)+" l -"+horizon3+" 0 l -20 -8 l -150 0";
      drawBranchLine(d1,d2,d3,0.3)
      var style = {'top':startY-10+'px','left':30,"visibility":'visible'}
      drawDesc_1(style,name)
    }
    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    circle.setAttribute('cx',startX);
    circle.setAttribute('cy',startY);
    circle.setAttribute('r',2);
    circle.setAttribute('class','descCircle')
    svg.appendChild(circle);
}
/**
 *
 * 画描述
 *
 * **/
function drawDesc_1(style,name) {
  var list = getEquipmentData(name);
  if(!list){
    console.log('没有设备列表数据');
    return
  }
  var dom = '';
  var len = list.length;
  for(var k = 0; k < len; k++){
    dom += '<p>'+list[k]+'</p>';
  }
  $('#showList').removeClass('showText').html(dom)
  $('#showContainer').attr("style","").css(style);
  window.config.showConTimer_1 = setTimeout(function () {
    $('#showContainer').animate({height:(len*15+20)+'px'},{duration:500},'linear')
  },900)
  setTimeout(function () {
    if(isIE9()){
      $('#showList').addClass('showTextIe9');
    }else{
      $('#showList').addClass('showText')
    }
  },1400)

  $('#verticalLine').css({"visibility":'hidden'})
}

function drawDesc_2(startY,position,name) {
  var list = getEquipmentData(name);
  if(!list){
    console.log('没有设备列表数据');
    return
  }
  var dom = '';
  var len = list.length;
  for(var k = 0; k < len; k++){
    dom += '<p>'+list[k]+'</p>';
  }
  var h1 = 15*len+15;
  var h2 = 15*len+20;
  var s1 = {'top':(startY-0.5*h2)+'px',"visibility":'visible'};
      s1[position] = 0;
  var s2 = {'top':(startY-0.5*h1)+'px',"visibility":'visible'};
      s2[position] = 155+'px';
  $('#showList').removeClass('showText').html(dom);
  $('#showContainer').attr("style","").css(s1);
  $('#verticalLine').attr("style","").css(s2);
  window.config.showConTimer_2= setTimeout(function () {
    $('#showContainer').animate({height:h2+'px'},{duration:500},'linear')
    $('#verticalLine').animate({height:h1+'px'},{duration:500},'linear')
  },600)
  setTimeout(function () {
    if(isIE9()){
      $('#showList').addClass('showTextIe9');
    }else{
      $('#showList').addClass('showText')
    }
  },1100)
}


/**
 *
 * 获取对应分类列表数据
 *
 * **/
function getEquipmentData(key) {
  var data = JSON.parse(sessionStorage.getItem('equipment')) || '';
  if(data != ''){
    return data[key]
  }else{
    var url = window.config.mapIp + "/tupu/eqp"
    var response = api.equipmentDataAjax(url)
    if (response.status !== 200) {
      return 0
    }
    var responseJSON = response.responseJSON
    if (responseJSON.success) {
      var responseJSONData = responseJSON.data
      sessionStorage.setItem('equipment', JSON.stringify(responseJSONData));
      return JSON.parse(sessionStorage.getItem('equipment'))[key]
    }
    else {
      return 0
    }
  }
}

/**
 *
 * 描述列表引出折线
 *
 * **/
function drawBranchLine(d1,d2,d3,time){
  var svg = document.getElementById('level14');

  var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  path1.setAttribute("d",d1);
  path1.setAttribute("id","descPath1");
  path1.style.stroke = "#84F6FF";
  path1.style.fill = 'none';
  path1.style.strokeWidth = "2px";
  svg.appendChild(path1);
  lineAnimation('descPath1',time,0);

  var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  path2.setAttribute("d",d2);
  path2.setAttribute("id","descPath2");
  path2.style.stroke = "#84F6FF";
  path2.style.opacity = '0.5';
  path2.style.fill = 'none';
  path2.style.strokeWidth = "1px";
  svg.appendChild(path2);
  lineAnimation('descPath2',time,time);

  var path3 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  path3.setAttribute("d",d3);
  path3.setAttribute("id","descPath3");
  path3.style.stroke = "#84F6FF";
  path3.style.fill = 'none'
  path3.style.strokeWidth = "2px";
  svg.appendChild(path3);
  lineAnimation('descPath3',time,time*2);
}


/**
 *
 * 展示线条动画效果
 *
 * **/
function lineAnimation(id,doTime,delayTime) {
  var path = document.querySelector('#'+id);
  if(!path) return;
  var length = path.getTotalLength();

  path.style.transition = path.style.WebkitTransition = 'none';
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  path.getBoundingClientRect();

  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset '+doTime+'s linear '+delayTime+'s';
  path.style.strokeDashoffset = '0';
}

/**
*
*判断是否是ie9
*
** */
function isIE9(){
  let userAgent = navigator.userAgent;
  if(userAgent.indexOf("MSIE")>0 && userAgent.indexOf("MSIE 9.0")>0) {
    return true
  }else{
    return false
  }
}

module.exports={
  getElementDesc
}
